<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

</style>
<body>
<input type="text" id="input">
<span id="span"></span>
</body>
<script>
    //? 数据
    const data = {
        text: 'default'
    };
    const input = document.getElementById('input');
    const span = document.getElementById('span');
    //? 数据劫持
    Object.defineProperty(data, 'text', {
        //? 数据变化 --> 修改视图
        set(newVal) {
            input.value = newVal;
            span.innerHTML = newVal;
        }
    });
    //? 视图更改 --> 数据变化
    input.addEventListener('input', function(e) {
        data.text = e.target.value;
    });
</script>
</html>
